<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>主观题试卷统计系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <style>
    .app-container { padding: 20px; max-width: 1200px; margin: 0 auto; }
    .header { margin-bottom: 20px; display: flex; align-items: center; }
    .filter-bar { display: flex; align-items: center; gap: 15px; }
    .el-table .header-row th { background-color: #e1f3d8 !important; }
    .full-width { width: 100%; }
    .refresh-btn { margin-left: 20px; }
    .table-container { margin-top: 20px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <div id="app" class="app-container">
    <div class="header">
      <h2>📊 主观题试卷统计系统</h2>
      <div class="filter-bar">
        <el-select
          v-model="selectedDate"
          placeholder="选择日期"
          @change="fetchData"
          class="date-selector">
          <el-option
            v-for="date in dateOptions"
            :key="date"
            :label="formatDate(date)"
            :value="date">
          </el-option>
        </el-select>

        <el-button
          type="primary"
          icon="el-icon-refresh"
          class="refresh-btn"
          @click="refreshData">
          刷新数据
        </el-button>
      </div>
    </div>

    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="full-width"
        :header-row-class-name="'header-row'">
        <el-table-column prop="序号" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="日期" label="日期" width="120" align="center"></el-table-column>
        <el-table-column prop="试卷号" label="试卷号" width="120" align="center"></el-table-column>
        <el-table-column prop="考试课程" label="考试课程"></el-table-column>
        <el-table-column prop="数量" label="数量" width="100" align="center"></el-table-column>
      </el-table>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          tableData: [],
          dateOptions: [],
          selectedDate: ''
        }
      },
      mounted() {
        this.fetchDates();
      },
      methods: {
        // 格式化日期显示
        formatDate(dateStr) {
          const year = dateStr.substring(0, 4);
          const month = dateStr.substring(4, 6);
          const day = dateStr.substring(6, 8);
          return `${year}年${month}月${day}日`;
        },

        // 获取日期范围
        fetchDates() {
          axios.get('http://localhost:5000/api/dates')
            .then(response => {
              this.dateOptions = response.data;
              if (this.dateOptions.length > 0) {
                this.selectedDate = this.dateOptions[0];
                this.fetchData();
              }
            })
            .catch(error => {
              this.$message.error('日期获取失败: ' + error.message);
            });
        },

        // 获取表格数据
        fetchData() {
          if (!this.selectedDate) return;

          axios.get('http://localhost:5000/api/data', {
            params: { date: this.selectedDate }
          })
          .then(response => {
            this.tableData = response.data;
            // console.log("data:"+JSON.parse(response.data))
          })
          .catch(error => {
            this.$message.error('数据获取失败: ' + error.message);
          });
        },

        // 刷新数据
        refreshData() {
          axios.post('http://localhost:5000/api/refresh')
            .then(() => {
              this.$message.success('缓存已刷新');
              this.fetchData();
            })
            .catch(error => {
              this.$message.error('刷新失败: ' + error.message);
            });
        }
      }
    });
  </script>
</body>
</html>